<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>3D旋转木马</title>
	<style type="text/css">
		* {
			/*		初始化页面内外边距*/
			margin: 0;
			padding: 0;
		}

		body {
			/*		弹性布局 元素垂直水平居中*/
			display: flex;
			justify-content: center;
			align-items: center;
			/*		占浏览器高度占比*/
			height: 100vh;
			background: black;
			/*		调整视距 让元素看上去更有立体感*/
			perspective: 900px;
		}

		section {
			/*		相对定位*/
			position: relative;
			width: 300px;
			height: 250px;
			/*		鼠标放到元素上变小手*/
			cursor: pointer;
			/*		让子元素保留3D位置*/
			transform-style: preserve-3d;
			/*		动画属性设置：名称 时长 匀速 无限循环*/
			animation: rotate 20s linear infinite;
		}

		/*	鼠标滑过元素停止动画*/
		section:hover {
			animation-play-state: paused;
		}

		section div {
			/*		绝对定位*/
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			text-align: center;
			/*		增加below倒影 15px是元素与倒影的距离 后面是设置背景渐变颜色的*/
			-webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 10%, rgba(255, 255, 255, 0.3));
		}

		section div:nth-child(1) {
			background: #CC9812;
			transform: translateZ(300px);
		}

		section div:nth-child(2) {
			background: #1A4E89;
			transform: rotateY(60deg) translateZ(300px);
		}

		section div:nth-child(3) {
			background: #E704BF;
			transform: rotateY(120deg) translateZ(300px);
		}

		section div:nth-child(4) {
			background: #9B0205;
			transform: rotateY(180deg) translateZ(300px);
		}

		section div:nth-child(5) {
			background: #6B0489;
			transform: rotateY(240deg) translateZ(300px);
		}

		section div:nth-child(6) {
			background: #1AA52D;
			transform: rotateY(300deg) translateZ(300px);
		}

		/*	定义旋转动画*/
		@keyframes rotate {
			0% {
				transform: rotateY(0);
			}

			100% {
				transform: rotateY(360deg);
			}
		}

		*/
	</style>
</head>

<body>
	<section>
		<div><img src="../image/1.png" alt=""></div>
		<div><img src="../image/2.png" alt=""></div>
		<div><img src="../image/3.png" alt=""></div>
		<div><img src="../image/4.png" alt=""></div>
		<div><img src="../image/5.png" alt=""></div>
		<div><img src="../image/6.png" alt=""></div>
	</section>
</body>

</html>